<template>
  <div>
    <div v-if="!pushStatus">
    <el-row style="margin-bottom:10px">
      <el-col :span="8" >
        <h4 style="margin:0">
          <span>推送管理</span>
          <el-button  type="success" class="addBtn" @click="addUserFun" v-if="userRole.MSG_PS_1801001"><i class="el-icon-plus"></i>推送</el-button>          
        </h4>
      </el-col>
      <el-col :span="16" style="text-align:right">
        
      </el-col>
    </el-row>
   
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <!--<el-table-column type="selection" width="55"></el-table-column>-->
      <el-table-column prop="ID" label="序号" width="60">
         <template slot-scope="scope">{{scope.$index+1}}</template>
      </el-table-column>
      <el-table-column prop="date" label="时间">
        <template slot-scope="scope">
          {{timeFun(scope.row.created_at)}}
        </template>
      </el-table-column>      
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="tui" label="发布时间"> 
        <template slot-scope="scope">
          {{timeFun(scope.row.push_time)}}
        </template>
      </el-table-column>
      <el-table-column prop="user_id" label="对象">
        <template >
          <span>所有人</span>
        </template>
      </el-table-column>
      <el-table-column prop="page_view" label="点击量"></el-table-column>
      <el-table-column prop="status" label="状态" width="80px">
        <template slot-scope="scope">
          {{scope.row.status ? '已发布' : '未发布'}}
        </template>
      </el-table-column>
      <el-table-column prop="status" width="150" label="操作">
        <template slot-scope="scope">
          <div>
            <el-button v-if="scope.row.status == 0 && userRole.MSG_PS_1801002" class="addBtn" type="primary"  @click="editFun(scope.row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div v-if="pushStatus">
       <Addpush  @getlist = "getlist" ref="artice" :dataPush="dataPush"></Addpush>
    </div>
  </div>
</template>

<script>
  import Addpush from './Pushitem/Addpush'
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  export default {
    data() {
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        pushStatus:false,
        value:'关注',
        dataPush:'',
        total:0,
        currentPage4: 1,//分野  
        page:1,
        pageSize:10,
       
        tableData: []
      }
    },
    components:{
      Addpush
    },
    created(){
      this.getlist()
    },
    methods: {
      getlist(){
        Http.getPushMsgs({
          "pageIndex":this.page,
          "pageSize":this.pageSize
        })
        .then( res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
           this.pushStatus = false
        })
        .catch( error => {
          
        })
        this.pushStatus = false
      },
      editFun(row) {
        this.dataPush = row;
        this.pushStatus = true
      },
      
      //添加用户
      addUserFun() {
        this.pushStatus = true
      },
      timeFun(val) {
        return getTime(val)
      },
      //选择 推荐
      handleSelectionChange() {
        
      },
         //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getlist()
        
      },
    }
  }
</script>
<style  scoped>
.box{
  border-bottom:1px solid red;
}
    .test{
        border:1px solid #ccc;
    }
    .drag-item{
        width: 200px;
        height: 50px;
        line-height: 50px;
        margin: auto;
        position: relative;
        
        background: #ddd;
        margin:20px 5px;
    }
    .ghostClass{
        opacity: 1;
    }
    .bottom{
        width: 200px;
        height: 50px;
        position: relative;
        background: blue;
        top:2px;
        left: 2px;
        transition: all .5s linear;
    }
</style>
